<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>关注列表</title>
    <link rel="stylesheet" href="/css/common.css">
    <style>
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div>
    <h1>关注列表</h1>
    <input type="text" id="nameInput" placeholder="按姓名搜索" class="mb-4">
    <input type="text" id="nationalityInput" placeholder="按国籍搜索" class="mb-4">
    <input type="text" id="categoryInput" placeholder="按分类搜索" class="mb-4">
    <button onclick="searchFollowsByCriteria()" class="ml-2">搜索</button>
    <table>
        <thead>
        <tr>
            <th>用户名</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>出生日期</th>
            <th>出生地点</th>
            <th>国籍</th>
            <th>演艺经历</th>
            <th>代表作品</th>
            <th>分类</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="followTableBody">
        <tr th:each="follow : ${follows}">
            <td th:text="${follow.userName}"></td>
            <td th:text="${follow.name}"></td>
            <td th:text="${follow.age}"></td>
            <td th:text="${follow.birthDate}"></td>
            <td th:text="${follow.birthPlace}"></td>
            <td th:text="${follow.nationality}"></td>
            <td th:text="${follow.actingExperience}"></td>
            <td th:text="${follow.representativeWorks}"></td>
            <td th:text="${follow.profession}"></td>
            <td>
                <form th:action="@{/follows/{id}(id=${follow.id})}" method="post">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" value="删除">
                </form>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination">
        <!-- 首页 -->
        <a th:if="${currentPage > 1}" th:href="@{/follow-list(page=1, size=8)}" data-page="1">首页</a>
        <!-- 上一页 -->
        <a th:if="${currentPage > 1}" th:href="@{/follow-list(page=${currentPage - 1}, size=8)}" th:data-page="${currentPage - 1}">上一页</a>
        <!-- 页码列表 -->
        <span th:each="i : ${#numbers.sequence(
        (currentPage - 2 > 0)? currentPage - 2 : 1,
        (currentPage + 2 < totalPages)? currentPage + 2 : totalPages)}"
              th:class="${i == currentPage}? 'active' : ''"
              th:text="${i}">
            <a th:href="@{/follow-list(page=${i}, size=8)}" th:data-page="${i}"></a>
        </span>
        <!-- 下一页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/follow-list(page=${currentPage + 1}, size=8)}" th:data-page="${currentPage + 1}">下一页</a>
        <!-- 尾页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/follow-list(page=${totalPages}, size=8)}" th:data-page="${totalPages}">尾页</a>
    </div>
    <div th:if="${message}" class="message" th:text="${message}"></div>
    <div th:if="${error}" class="error" th:text="${error}"></div>
    <script>
        function searchFollowsByCriteria() {
            // 获取三个输入框的值，并转换为大写
            const nameFilter = document.getElementById('nameInput').value.toUpperCase();
            const nationalityFilter = document.getElementById('nationalityInput').value.toUpperCase();
            const categoryFilter = document.getElementById('categoryInput').value.toUpperCase();

            const table = document.getElementById('followTableBody');
            const rows = table.getElementsByTagName('tr');

            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                // 获取当前行的姓名、国籍和分类单元格的文本内容
                const name = cells[1].textContent || cells[1].innerText;
                const nationality = cells[5].textContent || cells[5].innerText;
                const category = cells[8].textContent || cells[8].innerText;

                // 判断当前行是否满足搜索条件
                const nameMatch = nameFilter === '' || name.toUpperCase().indexOf(nameFilter) > -1;
                const nationalityMatch = nationalityFilter === '' || nationality.toUpperCase().indexOf(nationalityFilter) > -1;
                const categoryMatch = categoryFilter === '' || category.toUpperCase().indexOf(categoryFilter) > -1;

                // 如果当前行满足所有搜索条件，则显示该行，否则隐藏该行
                if (nameMatch && nationalityMatch && categoryMatch) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }
    </script>
</div>
</body>
</html>
